<template>
    <div class="xiang">
        <div class="mix">
            <div class="banner">
                <button class="btn" @click="btn">&lt;</button>
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in shoppingList.pics2" :key="index">
                        <img :src="item" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="text">
                <h6 v-html="shoppingList.basicInfo.name"></h6>
                <div class="jieshao">{{shoppingList.basicInfo.characteristic}}</div>
                <div class="jiage">
                    <div>
                        <span class="dijia">低价￥{{shoppingList.basicInfo.minPrice}}</span>
                        <span>原价￥{{shoppingList.basicInfo.originalPrice}}</span>
                    </div>
                    <div>库存{{shoppingList.basicInfo.stores}}</div>
                </div>
            </div>
            <div class="content">
                <div class="top">
                    <div @click="change" :class="flag==true?'active':''">商品介绍</div>
                    <div @click="changes" :class="flag==true?'':'active'">商品评价</div>
                </div>
                <div class="shangpinjieshao">
                    <div class="shangpinjieshao-con" v-show="flag" v-html="shoppingList.content"></div>
                </div>
                <div class="shangpinpingjia" v-show="!flag">
                    <div class="shangpinpingjia-con" v-for="(item,index) in shoppingpingjiaList" :key="index">
                        <div class="touxiang">
                            <img :src="item.goods.avatarUrl" alt="">
                        </div>
                        <div class="neirong">
                            <p>匿名用户 <span class="span">{{item.goods.goodReputationStr}}</span></p>
                            <p>{{item.goods.goodReputationRemark}}</p>
                            <p class="shijian">
                                <span>{{item.goods.dateReputation}}</span>&nbsp;
                                <span>选择规格：{{item.goods.property}}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" dot />
                <van-goods-action-icon icon="cart-o" text="购物车" badge="" />
                <van-goods-action-icon icon="shop-o" text="店铺" badge="" />
                <van-goods-action-button type="warning" text="加入购物车" />
                <van-goods-action-button type="danger" text="立即购买" @click="tan" />
            </van-goods-action>
            <van-popup v-model="show" position="bottom" :style="{ height: '48.5%' }">
                <div style="font-size:0.35rem" class="tan">
                    <div class="tan-top">
                        <div class="tan-top-1">
                            <img :src="shoppingList.basicInfo.pic" alt="">
                        </div>
                        <div class="tan-top-2">
                            <p>{{shoppingList.basicInfo.name}}</p>
                            <span style="color:red">￥{{shoppingList.basicInfo.minPrice}}</span>
                        </div>
                    </div>
                    <div class="center">
                        <p class="center-top">{{shoppingList.properties[0].name}}</p>
                        <div class="center-bottom">
                            <p v-for="(item,index) in shoppingList.properties[0].childsCurGoods"
                                :class="indexs==index?'active':''" :key="index" @click="active(item,index)">
                                {{item.name}}</p>
                        </div>
                    </div>
                    <div class="bottom">
                        <p>购买数量</p>
                        <van-stepper v-model="num" @change="val(num)"/>
                    </div>
                    <van-button type="primary" size="large" color="red" @click="shopping">加入购物车</van-button>
                </div>
            </van-popup>
        </div>
    </div>

</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                flag: true,
                show: false,
                num: 0,
                indexs: '-1',
                guige:''
            }
        },

        computed: {
            ...mapState({
                shoppingList: state => state.homeSwiper.shoppingList,
                shoppingpingjiaList: state => state.homeSwiper.shoppingpingjiaList
            })
        },
        methods: {
            val(v){
                this.num = v
            },
            shopping(){
                // console.log(this.shoppingList.basicInfo.id)
                let obj = {
                    id:this.shoppingList.basicInfo.id,
                    img:this.shoppingList.basicInfo.pic,
                    title:this.shoppingList.basicInfo.name,
                    guige:this.guige.name,
                    num:this.num,
                    jiage:this.shoppingList.basicInfo.minPrice
                }
                this.$store.commit('shopping',obj)
                alert('加入购物车成功')
                // this.$router.push({
                //     path:'/shopping',
                //     query:{
                //         obj:obj
                //     }
                // })
            },
            active(item,index) {
                // console.log(item)
                this.guige=item
                this.indexs = index
            },
            tan() {
                this.show = !this.show
            },
            change() {
                this.flag = true
            },
            changes() {
                this.flag = false
            },
            btn() {
                this.$router.go(-1)
            }
        },
        mounted() {
            this.$store.dispatch('shopping', this.$route.query.item.id)
            this.$store.dispatch('shoppingpingjia', this.$route.query.item.id)
        }
    }
</script>

<style lang='scss' scoped>
    * {
        padding: 0px;
        margin: 0px;
    }

    .xiang {
        width: 100%;
        height: 100vh;
        overflow: scroll;

        .mix {
            width: 100%;
            overflow: hidden;
        }
    }

    .banner {
        width: 100%;
        height: 8rem;
        position: relative;

        .btn {
            position: absolute;
            z-index: 999;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            border-radius: 50%;
            font-size: 0.5rem;
        }

        .my-swipe {
            width: 100%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .text {

        h6 {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            font-size: 0.4rem;
            margin-top: 0.5rem;
        }

        .jieshao {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            font-size: 0.3rem;
            color: gray;
            margin-top: 0.3rem;
        }

        .jiage {
            padding: 0.3rem;
            margin-top: 0.3rem;
            font-size: 0.3rem;
            color: gray;
            display: flex;
            justify-content: space-between;
            border-bottom: 0.2rem solid rgb(240, 237, 237);

            .dijia {
                color: red;
                margin-right: 0.3rem;
            }

        }
    }

    .content {
        width: 100%;

        .top {
            display: flex;
            font-size: 0.5rem;

            div {
                width: 50%;
                text-align: center;
                height: 1.2rem;
                line-height: 1.2rem;
            }

        }

        .shangpinjieshao {
            margin-top: 0.2rem;
            width: 100%1;
            font-size: 0.3rem;

        }

        .shangpinjieshao-con>>>img {
            width: 100% !important;
        }

        .shangpinpingjia {
            font-size: 0.25rem;
            margin-top: 0.2rem;

            .shangpinpingjia-con {


                .touxiang {
                    width: 20%;
                }

                .neirong {
                    position: relative;
                    height: 2rem;
                    width: 80%;

                    .shijian {
                        position: absolute;
                        bottom: 0px;
                        font-size: 0.22rem;
                    }
                }

                border-bottom: gray solid 0.02rem;
                display: flex;
            }
        }
    }

    .active {
        border-bottom: 0.1rem solid red;
    }

    .tan {
        width: 100%;

        .tan-top {
            width: 100%;
            height: 3rem;
            padding: 0.3rem;
            display: flex;

            .tan-top-1 {
                width: 30%;

                img {
                    width: 100%;
                    height: 100%;
                }

            }

            .tan-top-2 {
                margin-left: 0.2rem;

                p {
                    margin-bottom: 0.5rem;
                }
            }

        }

        .center {
            width: 100%;
            padding: 0.2rem;

            .center-top {
                height: 0.8rem;
                line-height: 0.8rem;
            }

            .center-bottom {
                width: 100%;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                justify-items: center;
                justify-content: space-around;

                p {
                    border: 0.01rem solid gray;
                    padding: 0.1rem;
                    margin: 0.1rem;
                }

                .active {
                    border: 0.01rem solid red;
                }
            }
        }

        .bottom {
            width: 100%;
            padding: 0.2rem;
            display: flex;
            justify-content: space-between;
        }

        .btn {
            width: 100%;
            background-color: red;
            color: white;
            border: red;
            height: 0.8rem;
            line-height: 0.8rem;
        }
    }

    .span {
        display: inline-block;
        padding: 0.02rem;
        background: red;
        color: white;
        margin-left: 0.2rem;
    }
</style>